<template>
  <div class="detailInfo">
    <!-- {{ value }} -->
    <div class="cloud-item" v-for="(item, index) in safeguard" :key="index">
      <div class="left">
        <img src="@/assets/icon／保障@2x.png" alt="" />
      </div>
      <div class="right">
        <div class="title">{{ item.title }}</div>
        <div class="info">
          {{ item.info }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      safeguard: [
        {
          icon: '',
          title: '口碑好货',
          info: '精挑细选市场好评度高、人气旺、效果好、口碑见证的产品'
        },
        {
          icon: '',
          title: '正品保障',
          info: '所售产品均为全新正品，绝对权威机构检测，质量保证，请放心购买'
        },
        {
          icon: '',
          title: '关于物流',
          info:
            '按订单顺序发货，确保亲们收到完好宝贝，提醒亲们签收快递时检查包装是否完好'
        },
        {
          icon: '',
          title: '保密发货',
          info: '不用担心签收包裹时被人看到尴尬，保护您的隐私'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.cloud-item {
  display: flex;
  justify-content: start;
  padding: 12px 30px;
  .left {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    img {
      width: 24px;
      height: 24px;
    }
  }
  .right {
    color: #1f0d44;
    font-size: 14px;
    .info {
      margin-top: 10px;
      color: #afabb7;
      line-height: 22px;
    }
  }
}
</style>
